<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 3000px;
            height: 3000px;
        }
    </style>
    <script>
        // var btn = document.getElementById('btn');
        // console.log(btn); // null 

        window.onload = function(){
            // 整个页面的元素 外部资源(js css 图片等) 加载完毕  
            // function 执行   里边的代码才执行  
            var btn = document.getElementById('btn');
            console.log(btn);
        }
    </script>
</head>
<body>
    <div onclick="alert('do not touch me')">爱的束发生的发生</div>
    <script>
        //什么是事件?

        //  通过用户或者浏览器的一些行为 让某些函数执行了  

        // 

        /* 
            window.on+事件类型 = function(){

            }


            window.on+事件类型 = 函数名;


            1. load 
                语法:
                    window.onload = function(){

                    }

                函数执行:
                    页面所有的外部资源加载完毕执行  
                
                什么时候会用到 load ?
                    当我们把script 写在head中 并且 需要获取 body中的元素 



            2. resize
                  语法:
                     window.onresize = function(){

                     }
                   
                    函数执行:
                    浏览器的尺寸发生改变,不管横向还是纵向 




            3. scorll 
                   语法:
                     window.onscorll = function(){

                     }
                   
                    函数执行:
                    当页面的滚动条位置发生改变  函数就执行  不管横向还是纵向

  
        
        
        
        
        
        */


        // var count = 0
        // window.onresize = function(){
        //     count++
        //     console.log(`这是你第${count}次作弊`);
        // }



        window.onscroll = function(){
            console.log('你在滚动滚动条');
        }



    </script>

    <button id="btn">这是按钮点我一下</button>
</body>
</html>